<template>
    <div class="approval">
        <!-- 面包屑导航 -->
        <div class="page_top">
            <div class="left_btn" @click="back">
                <img src="../../assets/image/back.png" alt=""/>
            </div>
            <crumbs basetitle="客户" title="审批管理"></crumbs>
        </div>
        <!-- 外面tab -->
        <div class="outtabbox">
            <div class="outtabitem" @click="changeouttab(0)">
                <div class="content">
                    <div :class="{
                        tabtext: true,
                        blueactiveword: outtabflag === 0
                    }">
                        派遣单位审批
                    </div>
                    <div class="count" style="right: -15px">
                        {{ tabnum1 >= 99 ? "99+" : tabnum1 }}
                    </div>
                </div>
                <div class="border_b">
                    <div :class="{
                        line: true,
                        blueactiveline: outtabflag === 0
                    }"></div>
                </div>
            </div>
            <div class="outtabitem" @click="changeouttab(1)">
                <div class="content">
                    <div :class="{
                        tabtext: true,
                        blueactiveword: outtabflag === 1
                    }">
                        充值审批
                    </div>
                    <div class="count">
                        {{ tabnum2 >= 99 ? "99+" : tabnum2 }}
                    </div>
                </div>
                <div class="border_b">
                    <div :class="{
                        line: true,
                        blueactiveline: outtabflag === 1
                    }"></div>
                </div>
            </div>
            <div class="outtabitem" v-if="false" @click="changeouttab(3)">
                <div class="content">
                    <div :class="{
                        tabtext: true,
                        blueactiveword: outtabflag === 3
                    }">
                        客户审批
                    </div>
                </div>
                <div class="border_b">
                    <div :class="{
                        line: true,
                        blueactiveline: outtabflag === 3
                    }"></div>
                </div>
            </div>
            <div class="outtabitem" @click="changeouttab(2)">
                <div class="content">
                    <div :class="{
                        tabtext: true,
                        blueactiveword: outtabflag === 2
                    }">
                        上传发票
                    </div>
                    <div class="count">
                        {{ tabnum3 >= 99 ? "99+" : tabnum3 }}
                    </div>
                </div>
                <div class="border_b">
                    <div :class="{
                        line: true,
                        blueactiveline: outtabflag === 2
                    }"></div>
                </div>
            </div>
        </div>
        <!-- 外面tab的不同内容 -->
        <div class="tabcontentbox">
            <div class="tabcontent1" v-if="outtabflag === 0">
                <div class="innertabbox">
                    <div :class="{
                        innertabitem: true,
                        innertabactive: innertabflag === 0
                    }" @click="changeinnertab1(0)">
                        长期保
                    </div>
                    <div :class="{
                        innertabitem: true,
                        innertabactive: innertabflag === 1
                    }" @click="changeinnertab1(1)">
                        日日保
                    </div>
                    <div :class="{
                        innertabitem: true,
                        innertabactive: innertabflag === 2
                    }" @click="changeinnertab1(2)">
                        团意日保
                    </div>
                    <div v-if="false" :class="{
                        innertabitem: true,
                        innertabactive: innertabflag === 3
                    }" @click="changeinnertab1(3)">
                        蚂蚁保
                    </div>
                </div>
                <div v-show="innertabflag == 0">
                    <el-card>
                        <filterComponent v-model:filter-data="filterData" @doSearch="getlonginsurecompanylist"/>
                    </el-card>
                    <div class="accounttable">
                        <div class="tableborder">
                            <tableComponent class="set-height" theme="dark" :table-header="tableHeader"
                                            :table-data="longtableData" v-model:page-info="pageInfo"
                                            @pageChange="handlePageChange">
                                <template #serveCompanyName>
                                    <el-table-column prop="serveCompanyName" width="280" label="派遣单位">
                                        <template #default="scope">
                                            <div class="flex">
                                                <div class="flex-no-shrink mg-r-5">
                                                    <div class="icon-status" :class="[
                                                        `status-${scope.row.status}`
                                                    ]">
                                                        {{
                                                            occupationStatusMap[
                                                                scope.row.status
                                                                ]
                                                        }}
                                                    </div>
                                                </div>
                                                <div class="flex-1">
                                                    {{
                                                        scope.row
                                                            .serveCompanyName
                                                    }}
                                                </div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </template>
                                <template #area>
                                    <el-table-column prop="area" width="280" label="单位地址" align="center">
                                        <template #default="scope">
                                            <el-popover placement="bottom" title="" :width="200" trigger="click"
                                                        content="">
                                                <el-select style="width: 100%;" v-model="areaValue" placeholder="请选择"
                                                           @change="onChnageAreaSure">
                                                    <el-option v-for="item in provincelist" :key="item.value"
                                                               :label="item.label" :value="item.value"/>
                                                </el-select>
                                                <template #reference>
                                                    <div class="b_d" @click="onChnageArea(scope.row)">{{
                                                            scope.row.area ? scope.row.area : '--'
                                                        }}
                                                        <el-icon>
                                                            <ArrowDown/>
                                                        </el-icon>
                                                    </div>
                                                </template>
                                            </el-popover>
                                        </template>
                                    </el-table-column>
                                </template>
                                <template #roleName>
                                    <el-table-column prop="roleName" width="300" label="最新申请工种">
                                        <template #default="scope">
                                            <div v-if="
                                                scope.row.status === 1 &&
                                                !scope.row.occupationRecord
                                            ">
                                                <span v-for="(ele, i) in scope.row
                                                    .occupationList" :key="i">{{ ele.name }}（{{
                                                        ele.level
                                                    }}类） /
                                                </span>
                                            </div>
                                            <div v-if="
                                                scope.row.occupationRecord
                                                    ?.occupationList
                                            ">
                                                <span v-for="(ele, i) in scope.row
                                                    .occupationRecord
                                                    .occupationList" :key="i">{{ ele.name }}（{{
                                                        ele.level
                                                    }}类） /
                                                </span>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </template>
                                <template #fileDetailList>
                                    <el-table-column width="110" label="最新图片视频">
                                        <template #default="scope">
                                            <div v-if="isFirstApply(scope.row)">
                                                <span v-if="
                                                    scope.row?.fileDetails
                                                        ?.length
                                                " class="blue pointer" @click="
                                                    onWatchVideo(
                                                        scope.row
                                                            ?.fileDetails
                                                    )
                                                    ">点击查看</span>
                                                <span v-else>--</span>
                                            </div>
                                            <div v-else>
                                                <span v-if="
                                                    scope.row
                                                        .occupationRecord
                                                        ?.fileDetails
                                                " class="blue pointer" @click="
                                                    onWatchVideo(
                                                        scope.row
                                                            .occupationRecord
                                                            ?.fileDetails
                                                    )
                                                    ">点击查看</span>
                                                <span v-else>--</span>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </template>

                                <template #createTime>
                                    <el-table-column width="120" label="最新申请时间">
                                        <template #default="scope">
                                            <div v-if="isFirstApply(scope.row)">
                                                {{ scope.row.createTime }}
                                            </div>
                                            <div v-else>
                                                {{
                                                    scope.row.occupationRecord
                                                        ?.createTime
                                                }}
                                            </div>
                                        </template>
                                    </el-table-column>
                                </template>

                                <template #status>
                                    <el-table-column width="120" label="最新审批状态">
                                        <template #default="scope">
                                            <div v-if="isFirstApply(scope.row)" :class="[
                                                `status-${scope.row.status}`
                                            ]">
                                                {{
                                                    occupationStatusMap[
                                                        scope.row.status
                                                        ]
                                                }}
                                            </div>
                                            <div v-else :class="[
                                                `status-${scope.row.occupationRecord?.status}`
                                            ]">
                                                {{
                                                    occupationStatusMap[
                                                        scope.row
                                                            .occupationRecord
                                                            ?.status
                                                        ]
                                                }}
                                            </div>
                                        </template>
                                    </el-table-column>
                                </template>

                                <template #channelStatus>
                                    <el-table-column width="120" label="保司审批状态">
                                        <template #default="scope">
                                            <div class="blue"
                                                 v-if="scope.row.channelStatus === 1 && scope.row.insuranceStatus === 1">
                                                已通过
                                            </div>
                                            <div class="red" v-if="scope.row.channelStatus === 2">已驳回</div>
                                            <div class="gray" v-if="scope.row.channelStatus === null">--</div>
                                            <div class="yellow" v-if="scope.row.channelStatus === 3">待审核</div>
                                        </template>
                                    </el-table-column>
                                </template>

                                <template #rejectRemark>
                                    <el-table-column label="驳回理由">
                                        <template #default="scope">
                                            <div v-if="scope.row.status === 2">
                                                {{ scope.row.rejectRemark }}
                                            </div>
                                            <div v-else>
                                                {{
                                                    scope.row.occupationRecord
                                                        ?.rejectRemark
                                                }}
                                            </div>
                                        </template>
                                    </el-table-column>
                                </template>

                                <template #operate>
                                    <el-table-column width="160" fixed="right" label="操作">
                                        <template #default="scope">
                                            <div class="flexbox">
                                                <div @click="
                                                    onShowDrawer(scope.row)
                                                    " style="margin-right: 16px" v-show="scope.row.status !== 2
                                                        " class="pointer blue">
                                                    详情
                                                </div>

                                                <!-- <div
                          @click="longserviceckeckedit(scope.row)"
                          style="margin-right: 16px"
                          v-show="scope.row.status === 1"
                          class="pointer blue"
                        >
                          编辑
                        </div> -->
                                                <!-- <div
                          @click="longaddvideo(scope.row)"
                          v-show="
                            scope.row.status === 0 ||
                            scope.row.status === 1 ||
                            scope.row.status === 3
                          "
                          class="pointer blue"
                          style="margin-right: 16px"
                        >
                          添加视频
                        </div> -->
                                                <!-- 第一次通过（通过被派遣单位） -->
                                                <div @click="
                                                    longserviceckeckok(
                                                        scope.row
                                                    )
                                                    " style="margin-right: 16px" v-show="scope.row.status === 0
                                                        " class="pointer green">
                                                    通过
                                                </div>
                                                <!-- 通过新工种 -->
                                                <div @click="
                                                    onShowNewOccopation(
                                                        scope.row
                                                    )
                                                    " style="margin-right: 16px" v-if="
                                                        scope.row.status ===
                                                        1 &&
                                                        scope.row
                                                            ?.occupationRecord
                                                            ?.status === 0
                                                    " class="pointer green">
                                                    通过
                                                </div>
                                                <!-- 驳回新工种 -->
                                                <div @click="
                                                    onCancelNewOccupation(
                                                        scope.row
                                                    )
                                                    " style="margin-right: 16px" v-if="
                                                        scope.row.status ===
                                                        1 &&
                                                        scope.row
                                                            ?.occupationRecord
                                                            ?.status === 0
                                                    " class="pointer oriange">
                                                    驳回
                                                </div>
                                                <!-- 驳回派遣单位 -->
                                                <div @click="
                                                    longserviceckeckno(
                                                        scope.row
                                                    )
                                                    " style="margin-right: 16px" v-show="scope.row.status === 0
                                                        " class="pointer oriange">
                                                    驳回
                                                </div>
                                                <!-- <div
                          @click="longserviceckeckreject(scope.row)"
                          style="margin-right: 16px"
                          v-show="scope.row.status === 1"
                          class="pointer blue"
                        >
                          拒保
                        </div>
                        <div
                          @click="longserviceckeckrejectback(scope.row)"
                          style="margin-right: 16px"
                          v-show="scope.row.status === 3"
                          class="pointer blue"
                        >
                          取消拒保
                        </div> -->
                                            </div>
                                        </template>
                                    </el-table-column>
                                </template>
                            </tableComponent>
                        </div>
                    </div>
                </div>
                <div v-show="innertabflag == 1">
                    <div class="formbox">
                        <div class="top">
                            <div class="toptext">筛选</div>
                            <div class="clear" @click="cleardayform">
                                <img src="../../assets/image/容器.png" alt=""/>
                                <span>清除</span>
                            </div>
                        </div>
                        <div class="formcontent">
                            <div class="formitem">
                                <div class="lable">客户名称：</div>
                                <el-select clearable style="margin-right: 52px; width: 265px" v-model="daycompanyid"
                                           filterable remote reserve-keyword @change="getdayinsurecompanylist"
                                           placeholder="请输入公司名称" :remote-method="remoteMethod"
                                           :loading="loading">
                                    <el-option v-for="item in companylist" :key="item.id" :label="item.companyName"
                                               :value="item.id"/>
                                </el-select>
                                <div class="lable">派遣单位：</div>
                                <el-input @input="changelongpqdw" v-model="daydispatchingagency" style="width: 265px"
                                          placeholder="请输入派遣单位" :prefix-icon="Search"/>
                            </div>
                            <div class="formitem">
                                <div class="lable">审核状态：</div>
                                <el-radio-group v-model="daycheckstatus" @change="getdayinsurecompanylist">
                                    <el-radio label="" size="large">全部</el-radio>
                                    <el-radio label="3" size="large">待审核</el-radio>
                                    <el-radio label="1" size="large">已通过</el-radio>
                                    <el-radio label="2" size="large">已驳回</el-radio>
                                </el-radio-group>
                            </div>
                        </div>
                    </div>
                    <div class="accounttable">
                        <div class="tableborder">
                            <el-table :data="daytableData" style="width: 100%; margin-top: 16px" :header-cell-style="{
                                background: '#FAFAFC',
                                color: '#202536'
                            }">
                                <el-table-column prop="companyName" label="客户名" width="200"/>
                                <el-table-column prop="salesName" label="商务名称"/>
                                <el-table-column prop="serveCompanyName" label="派遣单位" width="200"/>
                                <el-table-column prop="auditStatus" label="审批状态">
                                    <template #default="scope">
                                        <span v-show="scope.row.auditStatus === 3" class="gray">待审批</span>
                                        <span v-show="scope.row.auditStatus === 1" class="blue">已通过</span>
                                        <span v-show="scope.row.auditStatus === 2" class="red">已驳回</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="contacts" label="负责人"/>
                                <el-table-column prop="phone" label="手机号" width="150"/>
                                <el-table-column label="图片视频">
                                    <template #default="scope">
                                        <span v-show="scope.row.params.file" @click="
                                            lookdayvidio(
                                                scope.row.params.file
                                            )
                                            " class="blue pointer">点击查看</span>
                                        <span v-show="!scope.row.params.file">--</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="申请来源" width="150">
                                    <template #default="scope">
                                        <span>{{
                                                scope.row.wesureInfo.applySource === 0 ? '日日保' :
                                                    scope.row.wesureInfo.applySource === 1 ? "团意险" : '--'
                                            }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="申请时间" width="150">
                                    <template #default="scope">
                                        <span>{{
                                                scope.row.applyTime ? scope.row.applyTime.substring(0, 10) : "--"
                                            }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="申请理由">
                                    <template #default="scope">
                                        <span>{{
                                                scope.row.remark || "--"
                                            }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="驳回理由">
                                    <template #default="scope">
                                        <span>{{
                                                scope.row.rejectRemark || "--"
                                            }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="wesureInfo.industryName" label="行业名称" width="200"/>
                                <!-- <el-table-column prop="area" label="地区" /> -->
                                <el-table-column label="操作" width="200" fixed="right">
                                    <template #default="scope">
                                        <div class="flexvetweenbox">
                                            <div class="blue pointer" v-show="scope.row.auditStatus ===
                                                3 ||
                                                scope.row.auditStatus === 1
                                                " style="
                                                    border-right: 1px solid
                                                        #f4f4f7;
                                                    padding-right: 10px;
                                                    box-sizing: border-box;
                                                " @click="changedayhy(scope.row)">
                                                修改行业
                                            </div>
                                            <div v-show="scope.row.auditStatus === 3
                                                " class="green pointer" @click="daycheckok(scope.row)">
                                                通过
                                            </div>
                                            <div v-show="scope.row.auditStatus === 3
                                                " class="oriange pointer" @click="daycheckno(scope.row)">
                                                驳回
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="paginationborder">
                            <pagination :total="daytotal" :currentPage="daycurrentPage" :pageSize="daypageSize"
                                        @SizeChange="dayhandleSizeChange"
                                        @CurrentChange="dayhandleCurrentChange"></pagination>
                        </div>
                    </div>
                </div>
                <div v-show="innertabflag == 2">
                    <div class="formbox">
                        <div class="top">
                            <div class="toptext">筛选</div>
                            <div class="clear" @click="clearteamform">
                                <img src="../../assets/image/容器.png" alt=""/>
                                <span>清除</span>
                            </div>
                        </div>
                        <div class="formcontent">
                            <div class="formitem">
                                <div class="lable">客户名称：</div>
                                <el-select clearable style="margin-right: 52px; width: 265px" v-model="teamcompanyid"
                                           filterable remote reserve-keyword @change="getteaminsurecompanylist"
                                           placeholder="请输入公司名称" :remote-method="remoteMethod"
                                           :loading="loading">
                                    <el-option v-for="item in companylist" :key="item.id" :label="item.companyName"
                                               :value="item.id"/>
                                </el-select>
                                <div class="lable">派遣单位：</div>
                                <el-input @input="changeteampqdw" v-model="teamdispatchingagency" style="width: 265px"
                                          placeholder="请输入派遣单位" :prefix-icon="Search"/>
                            </div>
                            <div class="formitem">
                                <div class="lable">审核状态：</div>
                                <el-radio-group v-model="teamcheckstatus" @change="getteaminsurecompanylist">
                                    <el-radio label="" size="large">全部</el-radio>
                                    <el-radio label="3" size="large">待审核</el-radio>
                                    <el-radio label="1" size="large">已通过</el-radio>
                                    <el-radio label="2" size="large">已驳回</el-radio>
                                </el-radio-group>
                            </div>
                        </div>
                    </div>
                    <div class="accounttable">
                        <div class="tableborder">
                            <el-table :data="teamtableData" style="width: 100%; margin-top: 16px" :header-cell-style="{
                                background: '#FAFAFC',
                                color: '#202536'
                            }">
                                <el-table-column prop="companyName" label="客户名"/>
                                <el-table-column prop="serveCompanyName" label="派遣单位"/>
                                <el-table-column prop="auditStatus" label="审批状态">
                                    <template #default="scope">
                                        <span v-show="scope.row.auditStatus === 3" class="gray">待审批</span>
                                        <span v-show="scope.row.auditStatus === 1" class="blue">已通过</span>
                                        <span v-show="scope.row.auditStatus === 2" class="red">已驳回</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="contacts" label="负责人"/>
                                <el-table-column prop="phone" label="手机号"/>
                                <el-table-column label="图片视频">
                                    <template #default="scope">
                                        <span v-show="scope.row.params.file" @click="
                                            lookdayvidio(
                                                scope.row.params.file
                                            )
                                            " class="blue pointer">点击查看</span>
                                        <span v-show="!scope.row.params.file">--</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="申请来源" width="150">
                                    <template #default="scope">
                                        <span>{{
                                                scope.row.wesureInfo.applySource === 0 ? '日日保' :
                                                    scope.row.wesureInfo.applySource === 1 ? "团意险" : '--'
                                            }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="wesureInfo.industryName" label="行业名称"/>
                                <!-- <el-table-column prop="area" label="地区" /> -->
                                <el-table-column label="操作">
                                    <template #default="scope">
                                        <div class="flexvetweenbox">
                                            <div class="blue pointer" v-show="scope.row.auditStatus ===
                                                3 ||
                                                scope.row.auditStatus === 1
                                                " style="
                                                    padding-right: 10px;
                                                    box-sizing: border-box;
                                                " @click="changeteamhy(scope.row)">
                                                修改行业
                                            </div>
                                            <div v-show="scope.row.auditStatus === 3
                                                " class="green pointer" @click="teamcheckok(scope.row)">
                                                通过
                                            </div>
                                            <div v-show="scope.row.auditStatus === 3
                                                " class="oriange pointer" @click="teamcheckno(scope.row)">
                                                驳回
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="paginationborder">
                            <pagination :total="teamtotal" :currentPage="teamcurrentPage" :pageSize="teampageSize"
                                        @SizeChange="teamhandleSizeChange" @CurrentChange="teamhandleCurrentChange">
                            </pagination>
                        </div>
                    </div>
                </div>
                <div v-show="innertabflag == 3">
                    <myInsurance/>
                </div>
            </div>
            <div class="tabcontent2" v-if="outtabflag === 1">
                <rechargeApproval></rechargeApproval>
            </div>
            <div class="tabcontent3" v-if="outtabflag === 2">
                <div class="invoice">
                    <div class="innertabbox">
                        <div :class="{
                            innertabitem: true,
                            innertabactive: innertabflaginvoice === 0
                        }" @click="changeinnertabinvoice(0)">
                            已上传
                        </div>
                        <div :class="{
                            innertabitem: true,
                            innertabactive: innertabflaginvoice === 1
                        }" @click="changeinnertabinvoice(1)">
                            未上传
                        </div>
                        <div :class="{
                            innertabitem: true,
                            innertabactive: innertabflaginvoice === 2
                        }" @click="changeinnertabinvoice(2)">
                            批量上传
                        </div>
                    </div>
                    <div v-show="innertabflaginvoice == 0">
                        <div class="formbox">
                            <div class="top">
                                <div class="toptext">筛选</div>
                                <div class="flexcenterbox">
                                    <div class="clear" @click="clearok">
                                        <img src="../../assets/image/容器.png" alt=""/>
                                        <span>清除</span>
                                    </div>
                                    <div class="clear" @click="moreinvoicelistuploadtc = true">
                                        <img src="../../assets/image/aaa.png" alt=""/>
                                        <span>上传</span>
                                    </div>
                                    <div class="clear" @click="invoiceexportallfnok">
                                        <img src="../../assets/image/Share.png" alt=""/>
                                        <span>导出</span>
                                    </div>
                                    <div class="clear" @click="changeopenorcloseflag">
                                        <img v-show="openorcloseflaginvoice === false
                                            " src="../../assets/image/组1849.png" alt=""/>
                                        <img v-show="openorcloseflaginvoice === true
                                            " style="transform: rotate(180deg)" src="../../assets/image/组1849.png"
                                             alt=""/>
                                        <span>{{
                                                openorcloseflaginvoice === false
                                                    ? "收起"
                                                    : "展开"
                                            }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="formcontent">
                                <div class="formitem">
                                    <div class="lable">所属业务员：</div>
                                    <el-select clearable @change="getokallinvoicelist"
                                               style="margin-right: 16px; width: 200px" v-model="oksalesname"
                                               placeholder="请选择销售">
                                        <el-option v-for="item in allseller" :key="item.saleName" :label="item.saleName"
                                                   :value="item.saleId"/>
                                    </el-select>
                                    <div class="lable">收款账户：</div>
                                    <el-select clearable @change="getokallinvoicelist"
                                               style="margin-right: 16px; width: 200px" v-model="okreceiptIds" multiple
                                               collapse-tags collapse-tags-tooltip placeholder="请选择收款账户（可多选）">
                                        <el-option v-for="item in alladdmin" :key="item.value" :label="item.bankName"
                                                   :value="item.id"/>
                                    </el-select>
                                    <div class="lable">发票月份：</div>
                                    <el-date-picker clearable @change="getokallinvoicelist"
                                                    style="margin-right: 16px; width: 200px" v-model="okmonth"
                                                    type="month"
                                                    format="YYYY/MM" value-format="YYYY-MM"
                                                    placeholder="请选择发票月份"/>
                                    <div class="lable">申请月份：</div>
                                    <el-date-picker clearable @change="getokallinvoicelist"
                                                    style="margin-right: 16px; width: 200px"
                                                    v-model="okapplicationMonth"
                                                    type="month" value-format="YYYY-MM" placeholder="请选择申请月份"/>
                                </div>
                                <div class="formitem" v-show="openorcloseflaginvoice === false">
                                    <div class="lable">申请公司名：</div>
                                    <el-select clearable style="margin-right: 16px; width: 200px"
                                               v-model="okcompanyName" filterable remote reserve-keyword
                                               @change="getokallinvoicelist" placeholder="请输入公司名称"
                                               :remote-method="remoteMethod" :loading="loading">
                                        <el-option v-for="item in companylist" :key="item.companyName"
                                                   :label="item.companyName" :value="item.companyName"/>
                                    </el-select>
                                    <div class="lable">发票类型：</div>
                                    <el-select clearable @change="getokallinvoicelist"
                                               style="margin-right: 16px; width: 200px" v-model="oktype" class="m-2"
                                               placeholder="请选择发票类型">
                                        <el-option label="日日保" value="0"/>
                                        <el-option label="长期保" value="3"/>
                                        <el-option label="电子签" value="2"/>
                                        <el-option label="发薪专户" value="4"/>
                                    </el-select>
                                    <div class="lable">开票月份：</div>
                                    <el-date-picker clearable @change="getokallinvoicelist"
                                                    style="margin-right: 16px; width: 200px" v-model="okopenDay"
                                                    type="month"
                                                    value-format="YYYY-MM" placeholder="请选择开票月份"/>
                                    <div class="lable">核对状态：</div>
                                    <el-select clearable @change="getokallinvoicelist"
                                               style="margin-right: 16px; width: 200px" v-model="okcheckStatus"
                                               class="m-2"
                                               placeholder="请选择核对状态">
                                        <el-option label="正常" value="0"/>
                                        <el-option label="异常" value="1"/>
                                        <el-option label="待核对" value="2"/>
                                    </el-select>
                                </div>
                            </div>
                        </div>
                        <div class="accounttable">
                            <div class="tableborder">
                                <el-table :data="oktabledate" style="width: 100%" :header-cell-style="{
                                    background: '#FAFAFC',
                                    color: '#202536'
                                }">
                                    <el-table-column prop="companyName" label="申请公司名"/>
                                    <el-table-column prop="month" label="发票月份"/>
                                    <el-table-column prop="type" label="发票类型">
                                        <template #default="scope">
                                            <div v-show="scope.row.type === 0">国寿财</div>
                                            <div v-show="scope.row.type === 4">发薪专户</div>
                                            <div v-show="scope.row.type === 2">电子签</div>
                                            <div v-show="scope.row.type === 3">长期保</div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="applyTime" label="申请时间"/>
                                    <el-table-column prop="amount" label="发票金额">
                                        <template #default="scope">
                                            <div>
                                                <span class="orign">￥{{
                                                        scope.row.amount
                                                    }}</span>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="salesName" label="所属业务员"/>
                                    <el-table-column prop="bankName" label="收款账户"/>
                                    <el-table-column prop="rechargeAmount" label="充值金额">
                                        <template #default="scope">
                                            <div>
                                                <span class="orign">￥{{
                                                        scope.row.rechargeAmount
                                                    }}</span>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="uploadTime" label="上传日期"/>
                                    <el-table-column prop="checkStatus" label="核对状态">
                                        <template #default="scope">
                                            <div v-show="scope.row.checkStatus === 0
                                                ">
                                                正常
                                            </div>
                                            <el-tooltip class="box-item" effect="dark" content="异常原因：发票金额不符"
                                                        placement="bottom">
                                                <div v-show="scope.row
                                                    .checkStatus === 1
                                                    " class="orign pointer">
                                                    异常
                                                </div>
                                            </el-tooltip>
                                            <div v-show="scope.row.checkStatus === 2
                                                ">
                                                待核对
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="开票日期">
                                        <template #default="scope">
                                            <div v-if="
                                                scope.row.checkStatus === 0
                                            ">
                                                {{ scope.row.uploadTime }}
                                            </div>
                                            <div v-else>--</div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="area" width="150" label="操作">
                                        <template #default="scope">
                                            <div class="flexbox">
                                                <span class="blue pointer flexbox" style="margin-right: 6px"
                                                      @click="lookfp(scope.row)">
                                                    查看发票
                                                </span>
                                                <span style="margin-right: 6px" class="blue pointer" @click="
                                                    uploadfptcopen(
                                                        scope.row
                                                    )
                                                    ">
                                                    上传发票
                                                </span>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                            <div class="paginationborder">
                                <pagination :total="oktotal" :currentPage="okpagenum" :pageSize="okpagesize"
                                            @SizeChange="changeokpagesize"
                                            @CurrentChange="changeokpagenum"></pagination>
                            </div>
                        </div>
                    </div>
                    <div v-show="innertabflaginvoice == 1">
                        <div class="formbox">
                            <div class="top">
                                <div class="toptext">筛选</div>
                                <div class="flexcenterbox">
                                    <div class="clear" @click="clearno">
                                        <img src="../../assets/image/容器.png" alt=""/>
                                        <span>清除</span>
                                    </div>
                                    <div class="clear" @click="moreinvoicelistuploadtc = true">
                                        <img src="../../assets/image/aaa.png" alt=""/>
                                        <span>上传</span>
                                    </div>
                                    <div class="clear" @click="invoiceexportallfnno">
                                        <img src="../../assets/image/Share.png" alt=""/>
                                        <span>导出</span>
                                    </div>
                                    <div class="clear" @click="changeopenorcloseflag2">
                                        <img v-show="openorcloseflag2 === false" src="../../assets/image/组1849.png"
                                             alt=""/>
                                        <img v-show="openorcloseflag2 === true" style="transform: rotate(180deg)"
                                             src="../../assets/image/组1849.png" alt=""/>
                                        <span>{{
                                                openorcloseflag2 === false
                                                    ? "收起"
                                                    : "展开"
                                            }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="formcontent">
                                <div class="formitem">
                                    <div class="lable">所属业务员：</div>
                                    <el-select clearable @change="getnoallinvoicelist"
                                               style="margin-right: 16px; width: 200px" v-model="nosalesname"
                                               placeholder="请选择销售">
                                        <el-option v-for="item in allseller" :key="item.saleName" :label="item.saleName"
                                                   :value="item.saleId"/>
                                    </el-select>
                                    <div class="lable">收款账户：</div>
                                    <el-select clearable @change="getnoallinvoicelist"
                                               style="margin-right: 16px; width: 200px" v-model="noreceiptIds" multiple
                                               collapse-tags collapse-tags-tooltip placeholder="请选择收款账户（可多选）">
                                        <el-option v-for="item in alladdmin" :key="item.value" :label="item.bankName"
                                                   :value="item.id"/>
                                    </el-select>
                                    <div class="lable">发票月份：</div>
                                    <el-date-picker clearable @change="getnoallinvoicelist"
                                                    style="margin-right: 16px; width: 200px" v-model="nomonth"
                                                    type="month"
                                                    format="YYYY/MM" value-format="YYYY-MM"
                                                    placeholder="请选择发票月份"/>
                                    <div class="lable">申请月份：</div>
                                    <el-date-picker clearable @change="getnoallinvoicelist"
                                                    style="margin-right: 16px; width: 200px"
                                                    v-model="noapplicationMonth"
                                                    type="month" value-format="YYYY-MM" placeholder="请选择申请月份"/>
                                </div>
                                <div class="formitem" v-show="openorcloseflag2 === false">
                                    <div class="lable">申请公司名：</div>
                                    <el-select clearable style="margin-right: 16px; width: 200px"
                                               v-model="nocompanyName" filterable remote reserve-keyword
                                               @change="getnoallinvoicelist" placeholder="请输入公司名称"
                                               :remote-method="remoteMethod" :loading="loading">
                                        <el-option v-for="item in companylist" :key="item.companyName"
                                                   :label="item.companyName" :value="item.companyName"/>
                                    </el-select>
                                    <div class="lable">发票类型：</div>
                                    <el-select clearable @change="getnoallinvoicelist"
                                               style="margin-right: 16px; width: 200px" v-model="notype" class="m-2"
                                               placeholder="请选择发票类型">
                                        <el-option label="日日保" value="0"/>
                                        <el-option label="长期保" value="3"/>
                                        <el-option label="电子签" value="2"/>
                                        <el-option label="发薪专户" value="4"/>
                                    </el-select>
                                </div>
                            </div>
                        </div>
                        <div class="accounttable">
                            <div class="tableborder">
                                <el-table :data="notabledate" style="width: 100%" :header-cell-style="{
                                    background: '#FAFAFC',
                                    color: '#202536'
                                }">
                                    <el-table-column prop="companyName" label="申请公司名"/>
                                    <el-table-column prop="month" label="发票月份"/>
                                    <el-table-column prop="type" label="发票类型">
                                        <template #default="scope">
                                            <div v-show="scope.row.type === 0">国寿财</div>
                                            <div v-show="scope.row.type === 4">发薪专户</div>
                                            <div v-show="scope.row.type === 2">电子签</div>
                                            <div v-show="scope.row.type === 3">长期保</div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="applyTime" label="申请时间"/>
                                    <el-table-column prop="amount" label="发票金额" width="150">
                                        <template #default="scope">
                                            <div>
                                                <span class="orign">￥{{
                                                        scope.row.amount
                                                    }}</span>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="salesName" label="所属业务员"/>
                                    <el-table-column prop="bankName" label="收款账户"/>
                                    <el-table-column prop="amount" label="充值金额" width="150">
                                        <template #default="scope">
                                            <div>
                                                <span class="orign">￥{{
                                                        scope.row.rechargeAmount
                                                    }}</span>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作">
                                        <template #default="scope">
                                            <div class="blue pointer" @click="
                                                uploadfptcopen(scope.row)
                                                ">
                                                上传发票
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                            <div class="paginationborder">
                                <pagination :total="nototal" :currentPage="nopagenum" :pageSize="nopagesize"
                                            @SizeChange="changenopagesize"
                                            @CurrentChange="changenopagenum"></pagination>
                            </div>
                        </div>
                    </div>
                    <div v-show="innertabflaginvoice == 2">
                        <BatchUploads ref="omRef"/>
                    </div>
                </div>
            </div>
            <div class="w-full box-border" v-if="outtabflag === 3">
                <CustomerApprova></CustomerApprova>
            </div>
        </div>
        <!-- 日日保派遣单位审批修改行业弹窗 -->
        <el-dialog v-model="dialogdaychangehyVisible" title="修改行业" width="515">
            <span style="margin-right: 10px; font-weight: 700">行业</span>
            <el-select style="width: 400px" v-model="dayhy" multiple filterable allow-create default-first-option
                       :reserve-keyword="false" placeholder="请选择行业">
                <el-option v-for="item in dayhylist" :key="item.id" :label="item.industryName" :value="item.id"/>
            </el-select>
            <div class="flexcenterbox" style="margin-top: 20px">
                <el-button class="my_cancelbtn" @click="changedayhycancel">取消</el-button>
                <el-button class="my_btn" @click="changedayhyok">确定</el-button>
            </div>
        </el-dialog>
        <!-- 团意保派遣单位审批修改行业弹窗 -->
        <el-dialog v-model="dialogteamchangehyVisible" title="修改行业" width="515">
            <span style="margin-right: 10px; font-weight: 700">行业</span>
            <el-select style="width: 400px" v-model="teamhy" multiple filterable allow-create default-first-option
                       :reserve-keyword="false" placeholder="请选择行业">
                <el-option v-for="item in teamhylist" :key="item.id" :label="item.industryName" :value="item.id"/>
            </el-select>
            <div class="flexcenterbox" style="margin-top: 20px">
                <el-button class="my_cancelbtn" @click="changeteamhycancel">取消</el-button>
                <el-button class="my_btn" @click="changeteamhyok">确定</el-button>
            </div>
        </el-dialog>
        <!-- 长期保派遣单位审批通过弹窗（取消拒保同一个） -->
        <el-dialog v-model="dialogcheckpqdwokVisible" title="审批派遣单位" :width="isMobile ? '1540' : '80%'"
                   top="10vh">
            <div class="dialogcheckpqdwokVisibletop">
                <!-- <div class="flexbox topitem">
            <div class="area">地区</div> <el-select clearable v-model="area" filterable placeholder="请选择">
                <el-option v-for="item in provincelist" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div> -->
                <div class="flexbox topitem">
                    <div class="area">特别约定</div>
                    <el-input clearable style="width: 184px" v-model="tbyd" placeholder="选填"
                              class="input-with-select">
                    </el-input>
                </div>
            </div>
            <div class="dialogcheckpqdwokVisiblecontent">
                <div class="lcontent">
                    <div class="ipt">
                        <el-input v-model="jobtypekey" placeholder="请输入" class="input-with-select">
                            <template #prepend>
                                <el-button :icon="Search"/>
                            </template>
                        </el-input>
                    </div>
                    <div class="tabbox">
                        <div class="tab">
                            <div :class="{
                                tabitem: true,
                                jobtabactive: jobtabflag === i
                            }" @click="changejobtab(i, ele.id)" v-for="(ele, i) in joblist" :key="i">
                                {{ ele.name }}
                            </div>
                        </div>
                        <div class="tabcontent">
                            <el-checkbox-group v-model="longjobcheckList" @change="change">
                                <div class="columnflex">
                                    <el-checkbox v-show="jobtabid === ele.periodIndustryId &&
                                        ele.name.includes(jobtypekey)
                                        " v-for="(ele, i) in jobinfolist" :key="i" :label="ele">{{
                                            ele.name
                                        }}<span>（{{ ele.level }}类）</span></el-checkbox>
                                </div>
                            </el-checkbox-group>
                        </div>
                    </div>
                </div>
                <div class="rcontent">
                    <div class="topnum">
                        已选中<span class="blue">{{ longjobcheckList.length }}项</span>
                    </div>
                    <div class="jobselected">
                        <div class="selectjobitem" v-for="(ele, index) in longjobcheckList" :key="index">
                            <img src="../../assets/image/拖动排序.png" alt=""/>
                            <div class="jobname">
                                {{ ele.name }}<span>（{{ ele.level }}类）</span>
                            </div>
                            <img @click="delselectedlongjob(index)" src="../../assets/image/图标.png" alt=""/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dialogcheckpqdwokVisiblebtn">
                <el-button class="my_cancelbtn" @click="longservicecompanycancel">取消</el-button>
                <el-button class="my_btn" @click="longservicecompanysure">确定</el-button>
            </div>
        </el-dialog>
        <!-- 长期保派遣单位审批驳回弹窗 -->
        <el-dialog v-model="dialogbhVisible" title="驳回理由" width="515">
            <el-input v-model="bhtextarea" maxlength="100" placeholder="请输入驳回理由" show-word-limit
                      type="textarea"/>
            <div class="flexcenterbox" style="margin-top: 28px">
                <el-button class="my_cancelbtn" @click="longbhcancel">取消</el-button>
                <el-button class="my_btn" @click="longbhsure">确定</el-button>
            </div>
        </el-dialog>
        <!-- 日日保派遣单位审批驳回弹窗 -->
        <el-dialog v-model="dialogbhVisibledayinsure" title="驳回理由" width="515">
            <el-input v-model="dayinsurebhtextarea" maxlength="100" placeholder="请输入驳回理由" show-word-limit
                      type="textarea"/>
            <div class="flexcenterbox" style="margin-top: 28px">
                <el-button class="my_cancelbtn" @click="daybhcancel">取消</el-button>
                <el-button class="my_btn" @click="daybhsure">确定</el-button>
            </div>
        </el-dialog>
        <!-- 查看视频弹窗 -->
        <el-dialog v-model="diavideoVisible" title="" top="10vh" :width="isMobile ? '960' : '50%'"
                   @close="handleVideoClose">
            <h3 class="flexcenterbox">
                {{ atpresent + 1 }}/{{ videolist.length }}
            </h3>
            <div class="videobox">
                <div class="lbtn">
                    <img @click="prev" src="../../assets/image/lbtn.png" alt=""/>
                </div>
                <div v-show="atpresent === index" class="video" style="height: 600px" v-for="(ele, index) in videolist"
                     :key="index">
                    <video v-if="ele.slice(-3) === 'mp4'" crossorigin="anonymous"
                           :ref="(el: refItem) => setRefMap(el, `video${index}`)" style="height: 600px; width: 100%"
                           :src="ele" loop controls></video>
                    <img style="height: 600px; width: 100%" v-else :src="ele"/>
                </div>
                <div class="rbtn">
                    <img @click="next" src="../../assets/image/rbtn.png" alt=""/>
                </div>
            </div>
        </el-dialog>
        <!-- 产看凭证弹出框 -->
        <el-dialog v-model="dialogvoucherVisible" title="充值凭证查看" :width="isMobile ? '580' : '30%'">
            <div style="text-align: center">
                <img style="width: 100%; height: auto" crossorigin="anonymous" :src="voucherimg" alt=""/>
            </div>
        </el-dialog>
        <!-- 单个上传发票 -->
        <el-dialog v-model="uploadfptc" title="上传发票" width="600">
            <!-- <el-upload ref="uploadfp" class="upload-demo" :auto-upload="false" drag :before-upload="beforeUploadfp"
          :file-list="fileList" :on-change="onChange" :headers="{ Authorization: 'BackstageBearer ' + token }"
          :before-remove="beforeRemove" :action="baseurl + '/saas/invoice/upload?id=' + uploadfpid" :limit="1"
          :multiple="false">
          <img src="../../assets/image/uploadvideo.png" alt="">
          <div class="el-upload__text">
              将文件拖到此处，或<span class="blue">点击上传</span>
          </div>
      </el-upload> -->
            <el-upload ref="uploadfp" class="upload-demo" :auto-upload="false" drag :before-upload="beforeUploadfp"
                       :file-list="fileList" :on-change="onChange"
                       :headers="{ Authorization: 'BackstageBearer ' + token }"
                       :before-remove="beforeRemove" action="#" :limit="1" :multiple="false">
                <img src="../../assets/image/uploadvideo.png" alt=""/>
                <div class="el-upload__text">
                    将文件拖到此处，或<span class="blue">点击上传</span>
                </div>
            </el-upload>
            <div class="flexendbox">
                <el-button class="my_cancelbtn" @click="uploadfpcancel">取消</el-button>
                <el-button class="my_btn" @click="uploadfpsure">确定</el-button>
            </div>
        </el-dialog>
        <!-- 批量发票列表上传发票接口 -->
        <el-dialog v-model="moreinvoicelistuploadtc" title="上传发票" width="600">
            <el-upload ref="moreinvoicelistuploadtcref" class="upload-demo" accept=".zip" :auto-upload="false" drag
                       :before-upload="moreinvoicerlistbeforeUploadfp" :on-error="handleUploadError"
                       :file-list="moreinvoicefileList" :on-change="moreinvoicelistonChange"
                       :headers="{ Authorization: 'BackstageBearer ' + token }"
                       :before-remove="moreinvoicelistbeforeRemove"
                       :action="baseurl + '/saas/invoice/uploadZip-old?id=0'" :limit="1" :multiple="false"
                       :http-request="uploadActionfp">
                <img src="../../assets/image/uploadvideo.png" alt=""/>
                <div class="el-upload__text">
                    将文件拖到此处，或<span class="blue">点击上传</span>
                </div>
                <div class="red">
                    批量上传电子签发票文件名格式：电子签__年-月.zip；如：电子签__2022-01.zip
                    批量上传日日保发票文件名格式：日日保__年-月.zip；如：日日保__2022-01.zip
                </div>
            </el-upload>
            <div class="flexendbox">
                <el-button class="my_cancelbtn" @click="moreinvoicelistuploadfpcancel">取消</el-button>
                <el-button class="my_btn" @click="moreinvoicelistuploadfpsure">确定</el-button>
            </div>
        </el-dialog>
        <previewDialog v-model:show="showPreview" v-model:url="previewUrl"/>

        <el-dialog title="压缩视频" width="500" :center="true" :close-on-press-escape="false"
                   :close-on-click-modal="false"
                   v-model.show="showDialog">
            <div>{{ message }}</div>
            <el-progress :percentage="progress"/>
        </el-dialog>
    </div>
    <DrawerApproval v-model:show="showDrawer" :id="itemDetail.id" @success="getlonginsurecompanylist"/>
    <!-- 拒保弹框 -->
    <DialogRefuse v-model:show="showRefuse" :item-detail="itemDetail" @success="getlonginsurecompanylist"/>
    <!-- 通过 / 取消拒保 -->
    <DialogAddOccupation v-model:show="showOccupation" :from="occupationFrom" :item-detail="itemDetail"
                         @success="getlonginsurecompanylist"/>
    <!-- 驳回新工种 -->
    <DialogReject v-model:show="showCancelNewOccupation" reject-type="apply" :item-detail="itemDetail"
                  @success="getlonginsurecompanylist"/>
    <FullVideo v-model:show="showVideo" :videoList="videoList"/>
</template>

<script setup lang="ts">
import CustomerApprova from "@/views/approval/customer-approva.vue"
import tableComponent from '@/components/tableComponent/index.vue'
import filterComponent from '@/components/filterComponent/index.vue'
import baseurl from '../../api/env'
import crumbs from '../../components/crumbs.vue'
import myInsurance from './myInsurance.vue'
import {
    ref,
    reactive,
    computed,
    onActivated,
    ComponentPublicInstance
} from 'vue'
import {useRoute} from 'vue-router'
import {Search} from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import {
    ElMessage,
    ElMessageBox,
    ElTable,
} from 'element-plus'
import {
    invoiceexportallapi,
    getalladminapi,
    getmarketapi,
    getallinvoicelistapi,
    getPendingreviewnumapi,
    editPeriodServeCompanyApi,
    changedayandteamhyapi,
    getdayinsurejoblistapi,
    longdispatchingagencycheckapi,
    getlongjoblistapi,
    getcompanyapi,
    getdayinsurecompanylistapi,
    dayinsurecheckdispatchingAgencyapi,
    getlonginsurecompanylistapi,
    uploadinvoiceapi,
    openapiaccountcustomerapi,
    uploadZipOldApi
} from '../../api/api'
import {shake} from '../../utils/utils'
import {occupationStatusMap} from '@/utils/map.js'
import previewDialog from '@/components/previewDialog/index.vue'
import BatchUploads from './components/BatchUploads.vue'
import DrawerApproval from './components/DrawerApproval.vue'
import DialogRefuse from './components/DialogRefuse.vue'
import DialogAddOccupation from './components/DialogAddOccupation.vue'
import DialogReject from './components/DialogReject.vue'
import FullVideo from '@/components/videoComponent/FullVideo.vue'
import rechargeApproval from './recharge-approval.vue'

const onChnageArea = (val: any) => {
    changeareaId.value = val.id
}
const onChnageAreaSure = () => {
    editPeriodServeCompanyApi({id: changeareaId.value, area: areaValue.value}).then((res: any) => {
        ElMessage({
            message: '修改成功',
            type: 'success'
        })
        changeareaId.value = ''
        areaValue.value = ''
        getlonginsurecompanylist()
    })
}
const changeareaId = ref('')
const areaValue = ref('')
const tableHeader = ref([
    {
        label: '客户名',
        prop: 'companyName',
        width: 200
    },
    {
        label: '商务名称',
        prop: 'salesName',
        width: 80
    },
    {
        label: '派遣单位',
        prop: 'serveCompanyName'
    },
    {
        label: '单位地区',
        prop: 'area'
    },
    {
        label: '新申请视频',
        prop: 'fileDetailList'
    },
    {
        label: '申请时间',
        prop: 'createTime',
        width: 120
    },
    {
        label: '审批状态',
        prop: 'status'
    },
    {
        label: '保司审批状态',
        prop: 'channelStatus'
    },
    {
        label: '分配工种',
        prop: 'roleName'
    },
    {
        label: '特别约定',
        prop: 'remark'
    },
    {
        label: '驳回理由',
        prop: 'rejectRemark'
    },
    {
        label: '操作',
        prop: 'operate'
    }
])
const filterData = ref({
    list: {
        openApiCompanyId: {
            name: '渠道名称',
            prop: 'openApiCompanyId',
            value: '',
            placeholder: '请选择',
            type: 'select',
            options: [],
            defaultAttrs: {
                label: 'companyName',
                value: 'id'
            },
            handleFocus: (item: any) => {
                openapiaccountcustomer()
            }
        },
        companyId: {
            width: 200,
            name: '客户名称',
            prop: 'companyId',
            value: '',
            placeholder: '请输入公司名称',
            type: 'inputSelect',
            options: [],
            defaultAttrs: {
                label: 'companyName',
                value: 'id'
            },
            remoteMethod: async (val: any, i: any) => {
                if (val) {
                    const res: any = await getcompanyapi(val)
                    const arr = res
                    i.options = arr
                }
            }
        },
        serveCompanyName: {
            name: '派遣单位',
            prop: 'serveCompanyName',
            value: '',
            placeholder: '请输入',
            type: 'input',
            inputType: 'text'
        },
        status: {
            name: '企业审核状态',
            width: 500,
            prop: 'status',
            value: '',
            placeholder: '',
            span: 24,
            type: 'radiogroup',
            options: [
                {
                    label: '全部',
                    value: ''
                },
                {
                    label: '待审核',
                    value: 0
                },
                {
                    label: '已通过',
                    value: 1
                },
                {
                    label: '已驳回',
                    value: 2
                },
                {
                    label: '已拒保',
                    value: 3
                }
            ],
            defaultAttrs: {
                label: 'label',
                value: 'value'
            }
        },
        applyOccupationStatus: {
            name: '工种审核状态',
            width: 500,
            prop: 'status',
            value: '',
            placeholder: '',
            span: 24,
            type: 'radiogroup',
            options: [
                {
                    label: '全部',
                    value: ''
                },
                {
                    label: '待审核',
                    value: 0
                },
                {
                    label: '已通过',
                    value: 1
                },
                {
                    label: '已驳回',
                    value: 2
                }
            ],
            defaultAttrs: {
                label: 'label',
                value: 'value'
            }
        }
    }
})

const isMobile = ref((window as any).isMobile)

const openapiaccountcustomer = () => {
    openapiaccountcustomerapi().then((res: any) => {
        qdslist.value = res
        filterData.value.list.openApiCompanyId.options = res
    })
}
const qdslist = ref<any>([])
const route = useRoute()
const dialogdaychangehyVisible = ref(false)
const dialogteamchangehyVisible = ref(false)
const dialogcheckpqdwokVisible = ref(false)
const diavideoVisible = ref(false)
const dialogbhVisible = ref(false)
const loading = ref(false)

const showRefuse = ref(false)

const showOccupation = ref(false)

const occupationFrom = ref('pass')

type refItem = Element | ComponentPublicInstance | null

const refMap = {} as any
const setRefMap = (el: refItem, name: string) => {
    if (el) {
        refMap[`${name}`] = el
    }
}

const remoteMethod = (query: string) => {
    if (query) {
        loading.value = true
        getcompany(query)
    } else {
        companylist.value = []
    }
}
const invoiceexportallfnok = () => {
    invoiceexportallapi({
        status: 2,
        salesName: oksalesname.value,
        receiptIds: okreceiptIds.value,
        applicationMonth:
            okapplicationMonth.value === null ? '' : okapplicationMonth.value,
        companyName: okcompanyName.value,
        type: oktype.value,
        openDay: okopenDay.value,
        checkStatus: okcheckStatus.value
    }).then((res: any) => {
        window.location.href =
            baseurl + '/common/download?delete=true&fileName=' + res
    })
}
const invoiceexportallfnno = () => {
    invoiceexportallapi({
        status: 1,
        salesName: nosalesname.value,
        receiptIds: noreceiptIds.value,
        applicationMonth:
            noapplicationMonth.value === null ? '' : noapplicationMonth.value,
        companyName: nocompanyName.value,
        type: notype.value,
        openDay: noopenDay.value,
        checkStatus: nocheckStatus.value
    }).then((res: any) => {
        window.location.href =
            baseurl + '/common/download?delete=true&fileName=' + res
    })
}
const uploadfptcopen = (val: any) => {
    uploadfptc.value = true
    uploadfpid.value = val.id
}
const moreinvoicelistuploadfpsure = () => {
    moreinvoicelistuploadtcref.value.submit()
    moreinvoicelistuploadtcref.value.clearFiles()
    moreinvoicelistuploadtc.value = false
    getokallinvoicelist()
    getnoallinvoicelist()
}
const moreinvoicelistuploadfpcancel = () => {
    moreinvoicelistuploadtc.value = false
    moreinvoicelistuploadtcref.value.clearFiles()
}
const moreinvoicelistbeforeRemove = (file: any, fileListVal: any) => {
    moreinvoicefileList.value = fileListVal
}
const moreinvoicelistonChange = (file: any, fileListVal: any) => {
    moreinvoicefileList.value = fileListVal
}
const moreinvoicefileList = ref([])
const handleUploadError = async (err: any, file: any, fileList: any) => {
    //文件上传失败后的操作
    console.log(err, file, fileList, 'yhugdfsuygyhusyu')
}
const moreinvoicerlistbeforeUploadfp = (val: any) => {
    console.log(val)
}
const moreinvoicelistuploadtcref = ref()
const moreinvoicelistuploadtc = ref(false)
const uploadfpid = ref(0)
const token = ref<any>('')
const uploadfptc = ref(false)
const uploadfp = ref()
const fileList = ref([])
const onChange = (file: any, fileListVal: any) => {
    fileList.value = fileListVal
}
const uploadfpcancel = () => {
    uploadfptc.value = false
    uploadfp.value.clearFiles()
}
const beforeUploadfp = (val: any) => {
    console.log(val)
}
const beforeRemove = (file: any, fileListVal: any) => {
    console.log(fileListVal)
    fileList.value = fileListVal
}
const uploadfpsure = () => {
    if (fileList.value?.length) {
        const formData = new FormData()
        formData.append('file', fileList.value[0].raw)
        uploadinvoiceapi({file: formData, id: uploadfpid.value}).then(
            (res: any) => {
                uploadfp.value.clearFiles()
                ElMessage({
                    type: 'success',
                    message: '上传成功'
                })
                uploadfptc.value = false
                setTimeout(() => {
                    getokallinvoicelist()
                    getnoallinvoicelist()
                }, 300)
            }
        )
    }
}

const openorcloseflaginvoice = ref(false)
const changeopenorcloseflag = () => {
    openorcloseflaginvoice.value = !openorcloseflaginvoice.value
}
const openorcloseflag2 = ref(false)
const changeopenorcloseflag2 = () => {
    openorcloseflag2.value = !openorcloseflag2.value
}
const showPreview = ref(false)
const previewUrl = ref('')
const lookfp = (val: any) => {
    previewUrl.value = val.invoiceUrl
    showPreview.value = true
}

// 获取收款账户
const getalladmin = async () => {
    const res: any = await getalladminapi()
    alladdmin.value = res.list
}
const alladdmin = ref<any>([])
// 获取销售
const getmarket = async () => {
    const res: any = await getmarketapi()
    allseller.value = res
}
const allseller = ref<any>([])
const innertabflaginvoice = ref(0)
const changeinnertabinvoice = (i: number) => {
    innertabflaginvoice.value = i
    if (i === 0) {
        getokallinvoicelist()
    } else if (i === 1) {
        getnoallinvoicelist()
    } else {
        omRef.value.getData()
    }
}
const omRef = ref()
const getnoallinvoicelist = async () => {
    const res: any = await getallinvoicelistapi({
        pageNum: nopagenum.value,
        pageSize: nopagesize.value,
        status: 1,
        salesId: nosalesname.value,
        receiptIds: noreceiptIds.value.join(','),
        applicationMonth: noapplicationMonth.value
            ? ''
            : noapplicationMonth.value,
        companyName: nocompanyName.value,
        type: notype.value,
        openDay: noopenDay.value,
        checkStatus: nocheckStatus.value
    })
    notabledate.value = res.list
    nototal.value = res.totalCount
}
const getokallinvoicelist = async () => {
    console.log(okreceiptIds.value, 'fhsdhjsdhj')
    const res: any = await getallinvoicelistapi({
        pageNum: okpagenum.value,
        pageSize: okpagesize.value,
        status: 2,
        salesId: oksalesname.value,
        receiptIds: okreceiptIds.value.join(','),
        applicationMonth:
            okapplicationMonth.value === null ? '' : okapplicationMonth.value,
        companyName: okcompanyName.value,
        type: oktype.value,
        openDay: okopenDay.value,
        checkStatus: okcheckStatus.value
    })
    oktabledate.value = res.list
    oktotal.value = res.totalCount
}
const okpagesize = ref(10)
const nopagesize = ref(10)
const okpagenum = ref(1)
const nopagenum = ref(1)
const oktotal = ref(0)
const nototal = ref(0)
const oksalesname = ref('')
const nosalesname = ref('')
const okreceiptIds = ref([])
const noreceiptIds = ref([])
const okmonth = ref<any>('')
const nomonth = ref<any>('')
const okcompanyName = ref('')
const nocompanyName = ref('')
const okapplicationMonth = ref('')
const noapplicationMonth = ref('')
const oktype = ref('')
const notype = ref('')
const okopenDay = ref('')
const noopenDay = ref('')
const okcheckStatus = ref('')
const nocheckStatus = ref('')
const oktabledate = ref<any>([])
const notabledate = ref<any>([])
const changeokpagesize = (val: any) => {
    okpagesize.value = val
    okpagenum.value = 1
    getokallinvoicelist()
}
const changeokpagenum = (val: any) => {
    okpagenum.value = val
    getokallinvoicelist()
}
const changenopagesize = (val: any) => {
    nopagesize.value = val
    nopagenum.value = 1
    getnoallinvoicelist()
}
const changenopagenum = (val: any) => {
    nopagenum.value = val
    getnoallinvoicelist()
}
const clearok = () => {
    oksalesname.value = ''
    okreceiptIds.value = []
    okmonth.value = ''
    okcompanyName.value = ''
    okapplicationMonth.value = ''
    oktype.value = ''
    okopenDay.value = ''
    okcheckStatus.value = ''
    getokallinvoicelist()
}
const clearno = () => {
    nosalesname.value = ''
    noreceiptIds.value = []
    nomonth.value = ''
    nocompanyName.value = ''
    noapplicationMonth.value = ''
    notype.value = ''
    noopenDay.value = ''
    nocheckStatus.value = ''
    getnoallinvoicelist()
}
const dialogvoucherVisible = ref(false)
const voucherimg = ref('')
const uploadActionfp = (option: any) => {
    const param = new FormData()
    param.append('file', option.file)
    uploadZipOldApi(param).then(() => {
        ElMessage.success('视频上传成功！')
    })
}

const change = (e: any) => {
    console.log(e)
}
const atpresent = ref(0)
const prev = () => {
    if (atpresent.value <= 0) {
        return
    } else {
        atpresent.value = atpresent.value - 1
    }
}
const next = () => {
    if (atpresent.value >= videolist.value.length - 1) {
        return
    } else {
        atpresent.value = atpresent.value + 1
    }
}

onActivated(() => {
    if (route.query.current) {
        if (route.query.current === '1') {
            // getclientrecharge()
        }
        outtabflag.value = route.query.current * 1
    }
    okmonth.value = dayjs().subtract(1, 'month').format('YYYY-MM')
    nomonth.value = dayjs().subtract(1, 'month').format('YYYY-MM')
    token.value = sessionStorage.getItem('token')
    getlonginsurecompanylist()
    getlongjoblist()
    getPendingreviewnum()
})

const changedayandteamhy = async (
    productType: any,
    hyserveCompanyId: any,
    industryIdList: any,
    arrids: any
) => {
    const res: any = await changedayandteamhyapi({
        productType: productType,
        serveCompanyId: hyserveCompanyId,
        industryIds: JSON.stringify([
            ...new Set([...arrids, ...new Set(zcids.value)])
        ]),
        industryName: industryIdList.join(',')
    })
    console.log(res, '修改团意保日日保行业')
    if (res.code === 200) {
        ElMessage({
            message: res.msg,
            type: 'success'
        })
        if (productType === 0) {
            getdayinsurecompanylist()
            changedayhycancel()
        } else if (productType === 1) {
            getteaminsurecompanylist()
            changeteamhycancel()
        }
    }
}
const changedayhycancel = () => {
    dayhy.value = []
    dialogdaychangehyVisible.value = false
}
const changedayhyok = () => {
    const jobname: any = []
    dayhylist.value.forEach((ele: any, i: number) => {
        dayhy.value.forEach((item: any, i: number) => {
            if (item === ele.id) {
                jobname.push(ele.industryName)
            }
        })
    })
    changedayandteamhy(0, dayservicecompanyid.value, jobname, dayhy.value)
}
const changeteamhycancel = () => {
    teamhy.value = []
    dialogteamchangehyVisible.value = false
}
const changeteamhyok = () => {
    const jobname: any = []
    teamhylist.value.forEach((ele: any, i: number) => {
        teamhy.value.forEach((item: any, i: number) => {
            if (item === ele.id) {
                jobname.push(ele.industryName)
            }
        })
    })
    changedayandteamhy(1, teamservicecompanyid.value, jobname, teamhy.value)
}
const delselectedlongjob = (i: any) => {
    longjobcheckList.value.splice(i, 1)
}
const jobtypekey = ref('')
const tbyd = ref('')
const area = ref('')
// 获取日日保团意保行业数据
const getdayinsurejoblist = async (productType: any) => {
    const res: any = await getdayinsurejoblistapi({
        isDelete: 0,
        productType: productType
    })
    console.log(res, '获取日日保团意保行业数据')
    if (productType === 0) {
        dayhylist.value = res.rows
    } else if (productType === 1) {
        teamhylist.value = res.rows
    }
}
// 全国省份数据
const provincelist = ref([
    {label: '北京', value: '北京'},
    {label: '天津', value: '天津'},
    {label: '河北', value: '河北'},
    {label: '山西', value: '山西'},
    {label: '内蒙古', value: '内蒙古'},
    {label: '辽宁', value: '辽宁'},
    {label: '吉林', value: '吉林'},
    {label: '黑龙江', value: '黑龙江'},
    {label: '上海', value: '上海'},
    {label: '江苏', value: '江苏'},
    {label: '浙江', value: '浙江'},
    {label: '安徽', value: '安徽'},
    {label: '福建', value: '福建'},
    {label: '江西', value: '江西'},
    {label: '山东', value: '山东'},
    {label: '河南', value: '河南'},
    {label: '湖北', value: '湖北'},
    {label: '湖南', value: '湖南'},
    {label: '广东', value: '广东'},
    {label: '广西', value: '广西'},
    {label: '海南', value: '海南'},
    {label: '重庆', value: '重庆'},
    {label: '四川', value: '四川'},
    {label: '贵州', value: '贵州'},
    {label: '云南', value: '云南'},
    {label: '西藏', value: '西藏'},
    {label: '陕西', value: '陕西'},
    {label: '甘肃', value: '甘肃'},
    {label: '青海', value: '青海'},
    {label: '宁夏', value: '宁夏'},
    {label: '新疆', value: '新疆'},
    {label: '台湾', value: '台湾'},
    {label: '香港', value: '香港'},
    {label: '澳门', value: '澳门'}
])
const daycompanyid = ref('')
const teamcompanyid = ref('')
const daycheckstatus = ref('')
const teamcheckstatus = ref('')
const daydispatchingagency = ref('')
const teamdispatchingagency = ref('')
const longjobcheckList = ref<any>([])

const cleardayform = () => {
    daycompanyid.value = ''
    daycheckstatus.value = ''
    daydispatchingagency.value = ''
    getdayinsurecompanylist()
}
const clearteamform = () => {
    teamcompanyid.value = ''
    teamcheckstatus.value = ''
    teamdispatchingagency.value = ''
    getteaminsurecompanylist()
}
const companylist = ref([]) as any
// 获取公司列表
const getcompany = async (val: any) => {
    const res: any = await getcompanyapi(val)
    companylist.value = res
    loading.value = false
}
const dayhylist = ref<any>([])
const teamhylist = ref<any>([])
const dayhy = ref([])
const teamhy = ref([])
const dayservicecompanyid = ref(0)
const teamservicecompanyid = ref(0)
const changedayhy = async (ele: any) => {
    zcids.value = []
    await getdayinsurejoblist(0)
    if (!ele.wesureInfo.industryIds) {
        dayhy.value = []
    } else {
        const infoarr = JSON.parse(ele.wesureInfo.industryIds)
        console.log(dayhylist.value)
        let arr: any = []
        const hylistids: any = []
        dayhylist.value.forEach((j: any, k: any) => {
            hylistids.push(j.id)
        })
        // 使用 filter 方法过滤 arr1 中的元素，检查它们是否在 hylistids 中
        arr = infoarr.filter((item: any) => hylistids.includes(item))
        // 使用 filter 方法过滤 arr1 中的元素，检查它们是否不在 hylistids 中
        zcids.value = infoarr.filter((item: any) => !hylistids.includes(item))
        dayhy.value = arr
    }
    dayservicecompanyid.value = ele.id
    dialogdaychangehyVisible.value = true
}
const zcids = ref<any>([])
const changeteamhy = async (ele: any) => {
    zcids.value = []
    await getdayinsurejoblist(1)
    if (!ele.wesureInfo.industryIds) {
        teamhy.value = []
    } else {
        const infoarr = JSON.parse(ele.wesureInfo.industryIds)
        let arr: any = []
        const hylistids: any = []
        teamhylist.value.forEach((j: any, k: any) => {
            hylistids.push(j.id)
        })
        // 使用 filter 方法过滤 arr1 中的元素，检查它们是否在 hylistids 中
        arr = infoarr.filter((item: any) => hylistids.includes(item))
        // 使用 filter 方法过滤 arr1 中的元素，检查它们是否不在 hylistids 中
        zcids.value = infoarr.filter((item: any) => !hylistids.includes(item))
        teamhy.value = arr
    }
    teamservicecompanyid.value = ele.id
    dialogteamchangehyVisible.value = true
}
const dayhandleCurrentChange = (e: any) => {
    daycurrentPage.value = e
    getdayinsurecompanylist()
}
const dayhandleSizeChange = (e: any) => {
    daypageSize.value = e
    daycurrentPage.value = 1
    getdayinsurecompanylist()
}
const teamhandleCurrentChange = (e: any) => {
    teamcurrentPage.value = e
    getteaminsurecompanylist()
}
const teamhandleSizeChange = (e: any) => {
    teampageSize.value = e
    teamcurrentPage.value = 1
    getteaminsurecompanylist()
}

const videolist = ref([])
const lookdayvidio = (url: any) => {
    atpresent.value = 0
    diavideoVisible.value = true
    videolist.value = url
}

const showVideo = ref(false)
const videoList = ref([])

const onWatchVideo = (urlList: any) => {
    if (urlList?.length) {
        videoList.value = urlList.map((i: any) => i.fileUrl)
        showVideo.value = true
    }
}

const handleVideoClose = () => {
    for (const key in refMap) {
        refMap[key].pause()
    }
}
const daypageSize = ref(10)
const daycurrentPage = ref(1)
const daytotal = ref(0)
const daytableData = ref<any>([])
const changelongpqdw = () => {
    shake(getdayinsurecompanylist, 300)
}
const changeteampqdw = () => {
    shake(getteaminsurecompanylist, 300)
}

const joblist = ref<any>([])
const jobinfolist = ref<any>([])
// 获取长期保工种列表
const getlongjoblist = async () => {
    const res: any = await getlongjoblistapi({
        pageNum: 1,
        pageSize: 9999
    })
    const occupationListarr: any = []
    res.rows.forEach((ele: any, index: number) => {
        occupationListarr.push(...ele.occupationList)
        jobinfolist.value = occupationListarr
    })
    res.rows.forEach((ele: any, i: any) => {
        ele.occupationList.forEach((j: any, index: any) => {
            j.insurCompanyOccupationList = null
        })
    })
    joblist.value = res.rows
    jobtabid.value = res.rows[0].id
}
const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})
const longtableData = ref<any>([])
const handlePageChange = () => {
    getlonginsurecompanylist()
}

// 获取长期保企业列表
const getlonginsurecompanylist = async () => {
    const res: any = await getlonginsurecompanylistapi({
        pageNum: pageInfo.value.pageNum,
        pageSize: pageInfo.value.pageSize,
        status: filterData.value.list.status.value,
        newOccupationRecordStatus: filterData.value.list.applyOccupationStatus.value,
        companyId: filterData.value.list.companyId.value,
        serveCompanyName: filterData.value.list.serveCompanyName.value,
        openApiCompanyId: filterData.value.list.openApiCompanyId.value
    })
    pageInfo.value.total = res.totalCount
    longtableData.value = res.list
}
const teampageSize = ref(10)
const teamcurrentPage = ref(1)
const teamtotal = ref(0)
const teamtableData = ref<any>([])
// 获取团意保企业列表
const getteaminsurecompanylist = async () => {
    const res: any = await getdayinsurecompanylistapi({
        insureCompanyType: 'insure002_gsc',
        auditStatus: teamcheckstatus.value,
        serveCompanyName: teamdispatchingagency.value,
        companyId: teamcompanyid.value,
        pageSize: teampageSize.value,
        pageNumber: teamcurrentPage.value,
        productType: 1
    })
    teamtotal.value = res.total
    teamtableData.value = res.rows
}
// 获取日日保企业列表
const getdayinsurecompanylist = async () => {
    const res: any = await getdayinsurecompanylistapi({
        insureCompanyType: 'insure002_gsc',
        auditStatus: daycheckstatus.value,
        serveCompanyName: daydispatchingagency.value,
        companyId: daycompanyid.value ? daycompanyid.value : '',
        pageSize: daypageSize.value,
        pageNumber: daycurrentPage.value,
        productType: 0
    })
    daytotal.value = res.total
    daytableData.value = res.rows
}
const jobtabid = ref(0)
const changejobtab = (i: any, id: any) => {
    console.log(id, 'id')
    jobtabflag.value = i
    jobtabid.value = id
}
const checkservicecompanyform = reactive({
    id: 0,
    serveCompanyName: '',
    companyId: 0,
    companyName: '',
    serveCompanyId: 0
})
const longserviceckeckok = (ele: any) => {
    occupationFrom.value = 'pass'
    itemDetail.value = ele
    showOccupation.value = true

    return
}

const onShowNewOccopation = (ele: any) => {
    occupationFrom.value = 'apply'
    itemDetail.value = ele
    showOccupation.value = true
}

const showCancelNewOccupation = ref(false)

const onCancelNewOccupation = (ele: any) => {
    itemDetail.value = ele
    showCancelNewOccupation.value = true
}

const longservicecompanystatus = ref(0)
const islongserviceedit = ref(false)

const longservicecompanycancel = () => {
    dialogcheckpqdwokVisible.value = false
    longjobcheckList.value = []
    tbyd.value = ''
    area.value = ''
    jobtypekey.value = ''
    getlonginsurecompanylist()
}
const longservicecompanysure = () => {
    if (longjobcheckList.value.length === 0) {
        ElMessage.error('至少选择一项工种类型.')
        return
    }
    const arr: any = []
    longjobcheckList.value.forEach((ele: any, i: any) => {
        arr.push(ele.id)
    })
    longdispatchingagencycheck(
        islongserviceedit.value === true ? longservicecompanystatus.value : 1,
        arr,
        tbyd.value,
        area.value
    )
    longservicecompanycancel()
}
const longdispatchingagencycheck = async (
    status: any,
    occupationIds: any,
    remark: any,
    area: any
) => {
    const res: any = await longdispatchingagencycheckapi({
        ...checkservicecompanyform,
        area: area,
        status: status,
        occupationIds: JSON.stringify(occupationIds),
        remark: remark
    })
    console.log(res)
    if (res.code === 200) {
        getlonginsurecompanylist()
        ElMessage({
            message: res.msg,
            type: 'success'
        })
    }
}
const bhtextarea = ref('')
const longbhsure = () => {
    if (bhtextarea.value === '') {
        ElMessage.error('请输入驳回理由.')
        return
    }
    longdispatchingagencycheck(2, [], bhtextarea.value, carea.value)
    longbhcancel()
}
const longbhcancel = () => {
    dialogbhVisible.value = false
    bhtextarea.value = ''
}
const daybhsure = () => {
    if (dayinsurebhtextarea.value === '') {
        ElMessage.error('请输入驳回理由.')
        return
    }
    cval.value.remark = dayinsurebhtextarea.value
    cval.value.auditStatus = 2
    cval.value.insureCompanyType = 'insure002_gsc'
    dayinsurecheckdispatchingAgencyapi(cval.value).then((res: any) => {
        if (res.code === 200) {
            ElMessage({
                message: '操作成功',
                type: 'success'
            })
            getdayinsurecompanylist()
            daybhcancel()
        }
    })
}
const daybhcancel = () => {
    dialogbhVisibledayinsure.value = false
    dayinsurebhtextarea.value = ''
}
const dayinsurebhtextarea = ref('')
const dialogbhVisibledayinsure = ref(false)
const carea = ref('')
const longserviceckeckno = (ele: any) => {
    dialogbhVisible.value = true
    checkservicecompanyform.id = ele.id
    checkservicecompanyform.companyName = ele.companyName
    checkservicecompanyform.companyId = ele.companyId
    checkservicecompanyform.serveCompanyName = ele.serveCompanyName
    checkservicecompanyform.serveCompanyId = ele.serveCompanyId
    carea.value = ele.area
}


const back = () => {
    window.history.back()
}
const outtabflag = ref(0)
const changeouttab = (i: number) => {
    getPendingreviewnum()
    outtabflag.value = i
    if (i === 0) {
        console.log('派遣单位审批')
        innertabflag.value = 0
        getlonginsurecompanylist()
    } else if (i === 1) {
        console.log('充值审批')
        // getclientrecharge()
    } else if (i === 2) {
        console.log('上传发票')
        getokallinvoicelist()
        getnoallinvoicelist()
        getalladmin()
        getmarket()
    }
}
const cval = ref<any>()
const daycheckno = (val: any) => {
    dialogbhVisibledayinsure.value = true
    cval.value = JSON.parse(JSON.stringify(val))
}
const daycheckok = (val: any) => {
    ElMessageBox.confirm('确定通过该条审核么？', '提示', {
        type: 'warning'
    }).then(() => {
        const cval = val
        cval.insureCompanyType = 'insure002_gsc'
        cval.auditStatus = 1
        dayinsurecheckdispatchingAgencyapi(val).then((res: any) => {
            if (res.code === 200) {
                ElMessage({
                    message: '操作成功',
                    type: 'success'
                })
                getdayinsurecompanylist()
            }
        })
    })
}
const teamcheckno = (val: any) => {
    const cval = val
    cval.auditStatus = 2
    cval.insureCompanyType = 'insure002_gsc'
    dayinsurecheckdispatchingAgencyapi(cval).then((res: any) => {
        if (res.code === 200) {
            ElMessage({
                message: '操作成功',
                type: 'success'
            })
            getdayinsurecompanylist()
        }
    })
}
const teamcheckok = (val: any) => {
    const cval = val
    cval.insureCompanyType = 'insure002_gsc'
    cval.auditStatus = 1
    dayinsurecheckdispatchingAgencyapi(cval).then((res: any) => {
        if (res.code === 200) {
            ElMessage({
                message: '操作成功',
                type: 'success'
            })
            getdayinsurecompanylist()
        }
    })
}
const jobtabflag = ref(0)

const getPendingreviewnum = async () => {
    const res: any = await getPendingreviewnumapi()
    tabnum1.value = res.dailySvc + res.periodSvc
    tabnum2.value = res.dailyRe + res.periodRe
    tabnum3.value = res.invoices
}
const tabnum1 = ref(0)
const tabnum2 = ref(0)
const tabnum3 = ref(0)
// 投保审批内部tab切换
const innertabflag = ref(0)
const changeinnertab1 = (i: number) => {
    innertabflag.value = i
    if (i === 0) {
        console.log('长期保')
        getlonginsurecompanylist()
    } else if (i === 1) {
        console.log('日日保')
        getdayinsurecompanylist()
    } else if (i === 2) {
        console.log('团意保')
        getteaminsurecompanylist()
    }
}

const progress = ref(0)
const message = ref('')
const showDialog = ref(false)

const showDrawer = ref(false)
const itemDetail = ref({})
/**
 * 展示详情
 *
 */
const onShowDrawer = (item: any) => {
    itemDetail.value = item
    showDrawer.value = true
}

const isFirstApply = computed(() => {
    return (data: any) => {
        return (
            data.status === 0 ||
            (data.status === 1 && !data.occupationRecord) ||
            data.status === 2
        )
    }
})
</script>

<style scoped lang="scss">
.videobox {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;

    .lbtn {
        z-index: 999;
        position: absolute;
        top: 250px;
        left: 0;
    }

    .rbtn {
        z-index: 999;
        position: absolute;
        top: 250px;
        right: 0;
    }

    .video {
        flex: 1;
        width: 100%;
    }
}

.dialogcheckpqdwokVisiblebtn {
    margin-top: 32px;
    display: flex;
    align-items: center;
    justify-content: end;
}

.dialogcheckpqdwokVisiblecontent {
    box-sizing: border-box;
    margin-top: 16px;
    border-radius: 8px;
    display: flex;

    .lcontent {
        border: 1px solid #eaeaef;
        box-sizing: border-box;
        padding: 16px;
        border-radius: 6px;
        width: 60%;
        margin-right: 24px;

        .ipt {
            height: 30px;
        }

        .tabbox {
            margin-top: 16px;
            display: flex;

            .tab {
                width: 30%;
                height: 470px;
                overflow-y: scroll;

                .tabitem {
                    width: 100%;
                    box-sizing: border-box;
                    height: 38px;
                    line-height: 38px;
                    padding-left: 18px;
                    border-left: 2px solid #ffffff;
                    cursor: pointer;
                    font-size: 14px;
                }
            }

            .tabcontent {
                width: 70%;
                height: 470px;
                overflow-y: scroll;
                box-sizing: border-box;
                padding-left: 16px;
                font-size: 14px;
            }
        }
    }

    .rcontent {
        width: 39%;
        border: 1px solid #eaeaef;
        box-sizing: border-box;
        padding: 16px;
        border-radius: 6px;

        .jobselected {
            margin-top: 16px;
            width: 100%;
            box-sizing: border-box;
            height: 485px;
            overflow-y: scroll;

            .selectjobitem {
                margin-bottom: 15px;
                display: flex;
                align-items: center;
                width: 100%;
                box-sizing: border-box;
                padding: 6px 8px;

                .jobname {
                    flex: 1;
                    margin-left: 12px;
                    margin-right: 12px;
                    font-size: 12px;
                }
            }

            .selectjobitem:hover {
                background-color: #ebeffd;
                border-radius: 4px;
            }
        }
    }
}

.dialogcheckpqdwokVisibletop {
    display: flex;
    align-items: center;

    .topitem {
        margin-right: 20px;
        align-items: center;
        border: 1px solid #dcdfe6;
        border-radius: 4px;

        .area {
            min-width: 72px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            font-size: 12px;
        }
    }
}

.tableborder {
    border: 1px solid #eaeaef;
    border-bottom: none !important;
}

.paginationborder {
    border: 1px solid #eaeaef;
    padding-bottom: 16px;
}

.accounttable {
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 24px;
    margin-top: 16px;
}

.formbox {
    background-color: #ffffff;
    border-top-right-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 8px;
    border-radius: 8px;

    .formcontent {
        padding: 0 24px 16px;
        width: 100%;
        box-sizing: border-box;

        .formitem {
            margin-top: 16px;
            margin-right: 50px;
            display: flex;
            align-items: center;

            .formitemflexone {
                display: flex;
                align-items: center;
                flex: 1;
            }

            .lable {
                min-width: 70px;
                font-size: 14px;
                color: #202536;
                margin-right: 8px;
                text-align: right;
            }
        }
    }

    .top {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        padding: 32px 8px 16px;
        align-items: center;
        border-bottom: 1px solid #f4f4f7;

        .toptext {
            color: #3d3d3d;
            font-size: 16px;
            font-weight: bold;
        }

        .utils {
            display: flex;
            align-items: center;
        }

        .clear {
            cursor: pointer;
            margin-right: 20px;
            margin-left: 24px;
            color: #9497b1;
            font-size: 14px;

            img {
                width: 16px;
                height: 16px;
                margin-right: 6px;
                margin-bottom: -3px;
            }
        }
    }
}

.tabcontentbox {
    padding: 16px;
}

.tabcontent1 {
    width: 100%;
    box-sizing: border-box;
}

.innertabbox {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;

    .innertabitem {
        cursor: pointer;
        min-width: 90px;
        height: 41px;
        text-align: center;
        line-height: 41px;
        color: #a7aab2;
        font-size: 14px;
        background-color: #efeef1;
        border-top-right-radius: 8px;
        border-top-left-radius: 8px;
        border-top: 1px solid #e3e0e8;
        border-right: 1px solid #e3e0e8;
    }
}

.outtabbox {
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    padding: 0 24px;
    display: flex;
    align-items: center;
    background-color: #ffffff;

    .outtabitem {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 12px;
        min-width: 64px;
        margin-right: 32px;

        .border_b {
            width: 100%;
            height: 2px;
            box-sizing: border-box;
            padding: 0 14px;

            .line {
                width: 100%;
                background-color: #ffffff;
                height: 2px;
            }
        }

        .content {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            justify-content: center;
            min-width: 85px;
            position: relative;

            .tabtext {
                text-align: center;
                font-size: 16px;
                color: #9497b1;
            }

            .count {
                position: absolute;
                top: -5px;
                right: -4px;
                height: 14px;
                min-width: 16px;
                text-align: center;
                font-size: 12px;
                line-height: 14px;
                border-radius: 8px;
                background-color: #ff7642;
                color: #ffffff;
            }
        }
    }
}

.blueactiveline {
    background-color: #0256ff !important;
}

.blueactiveword {
    color: #0256ff !important;
}

.innertabactive {
    color: #0256ff !important;
    font-weight: 700;
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}

.pointer {
    cursor: pointer;
}

.blue,
.status-1 {
    color: #3e5ff5;
}

.gray,
.status-3 {
    color: #9497b1;
}

.red,
.status-2 {
    color: #ea0000;
}

.green {
    color: #00d679;
}

.yellow,
.status-0 {
    color: #ffa814;
}

.oriange {
    color: #ff7642;
}

.jobtabactive {
    background-color: #ebeffe;
    color: #3e5ff5;
    border-left: 2px solid #3e5ff5 !important;
}

.drawer {
    .closedrawer {
        cursor: pointer;
        position: fixed;
        top: 50px;
        right: 576px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 59px;
        background-color: #0256ff;
        font-size: 14px;
        color: #ffffff;

        img {
            margin-top: 5px;
        }
    }
}

.invoice {
    .innertabactive {
        color: #0256ff !important;
        font-weight: 700;
        background-color: #ffffff !important;
        border-color: #ffffff !important;
    }

    .tabcontentbox {
        padding: 16px;
    }

    .innertabbox {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;

        .innertabitem {
            cursor: pointer;
            min-width: 90px;
            height: 41px;
            text-align: center;
            line-height: 41px;
            color: #a7aab2;
            font-size: 14px;
            background-color: #efeef1;
            border-top-right-radius: 8px;
            border-top-left-radius: 8px;
            border-top: 1px solid #e3e0e8;
            border-right: 1px solid #e3e0e8;
        }
    }

    .formbox {
        background-color: #ffffff;
        border-top-right-radius: 8px;
        width: 100%;
        box-sizing: border-box;
        padding: 0 8px;
        border-radius: 8px;

        .formcontent {
            padding: 0 24px 16px;
            width: 100%;
            box-sizing: border-box;

            .formitem {
                margin-top: 16px;
                display: flex;
                align-items: center;

                .formitemflexone {
                    display: flex;
                    align-items: center;
                    flex: 1;
                }

                .lable {
                    min-width: 70px;
                    font-size: 14px;
                    color: #202536;
                    margin-right: 8px;
                    text-align: right;
                }
            }
        }

        .top {
            width: 100%;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            padding: 32px 8px 16px;
            align-items: center;
            border-bottom: 1px solid #f4f4f7;

            .toptext {
                color: #3d3d3d;
                font-size: 16px;
                font-weight: bold;
            }

            .utils {
                display: flex;
                align-items: center;
            }

            .clear {
                cursor: pointer;
                margin-right: 20px;
                margin-left: 24px;
                color: #9497b1;
                font-size: 14px;

                img {
                    width: 16px;
                    height: 16px;
                    margin-right: 6px;
                    margin-bottom: -3px;
                }
            }
        }
    }

    .accounttable {
        width: 100%;
        box-sizing: border-box;
        background-color: #ffffff;
        border-radius: 8px;
        padding: 24px;
        margin-top: 16px;
    }

    .tableborder {
        border: 1px solid #eaeaef;
        border-bottom: none !important;
    }

    .paginationborder {
        border: 1px solid #eaeaef;
        padding-bottom: 16px;
    }

    .orign {
        color: #ff7642;
    }

    .blue {
        color: #3e5ff5;
    }

    .pointer {
        cursor: pointer;
    }
}

.icon-status {
    font-size: 11px;
    padding: 0 6px;
    border-radius: 3px;

    &.status-0 {
        background: rgba(255, 168, 20, 0.3);
        color: #ffa814;
    }

    &.status-1 {
        background: rgba(80, 122, 252, 0.3);
        color: #507afc;
    }

    &.status-2 {
        background: rgba(234, 0, 0, 0.3);
        color: #ea0000;
    }

    &.status-3 {
        background: #565868;
        color: #fff;
    }
}
</style>
